﻿
@{
    ViewBag.Title = "EmployeePageList";
    Layout = "~/Views/Shared/_LayoutMain.cshtml";
}
@section css{
    <link rel="stylesheet" href="~/assets/portal/assets/css/common.css" />
    <link rel="stylesheet" href="~/bussiness/js/base/reset.css" />
    <style>

        .title{
            display:flex;
            align-items:center;
            position:relative;
            padding-left:10px;
            box-sizing:border-box;
            margin:16px 0;
            font-size:16px;
        }
            .title::after {
                position: absolute;
                left: 0px;
                content: "";
                display: inline-block;
                width: 3px;
                height: 16px;
                background: #0064e5;

         
            }
  
    </style>
}
<div id="PPESupplyRequest" class="font-['SourceHanSansSC']">
    <a-style-provider hash-priority="high">
        <a-config-provider :locale="vlocale">

            <a-image :width="200"
                     :style="{ display: 'none',zIndex:100 }"
                     :preview="{visible:PPESupplyRequestParams.previewShow.value,onVisibleChange:PPESupplyRequestParams.setVisible}" :src="PPESupplyRequestParams.imgUrl.value"></a-image>
            <m-pdf-pop-model></m-pdf-pop-model>
            <a-modal :destroy-on-close="true" v-model:open="PPESupplyRequestParams.popShow.value" :ok-text="{0:'汇总',1:'导出',2:'确定',3:'领取',4:'分发'}[PPESupplyRequestParams.popType.value]" :width="[3].includes(PPESupplyRequestParams.popType.value)?'30%': '70%'" height="800px" :title="{0:'选择汇总申请单信息',1:'汇总单信息',2:'通知预览',3:'上传领取凭证',4:'分发预览'}[PPESupplyRequestParams.popType.value]" v-on:close="PPESupplyRequestParams.handlePopClose" v-on:ok="PPESupplyRequestParams.handlePopOk">
                <a-spin :spinning="PPESupplyRequestParams.uploadLock.value" tip="加载中，请耐心等待" />
                <a-table v-if="PPESupplyRequestParams.popType.value==0" :pagination="false" :data-source="PPESupplyRequestParams.sumDataSource.value" :columns="PPESupplyRequestParams.sumColumns.value">

                </a-table>


                <div v-else-if="PPESupplyRequestParams.popType.value==1">
                    <a-form style="margin-top:20px" layout="inline"
                            :model="PPESupplyRequestParams.queryParams.value">
                        <a-form-item label="汇总申请单：">
                            <a-textarea placeholder="请输入申请单号" disabled :value="PPESupplyRequestParams.sumInfo.value"
                                        style="width:800px" auto-size>
                            </a-textarea>
                        </a-form-item>
                        <a-form-item label="类型：">
                            <a-input placeholder="请输入申请单号" disabled :value="PPESupplyRequestParams.cIndex.value==1?'普通劳防用品':'特种劳防用品'"
                                     style="width:200px">
                            </a-input>
                        </a-form-item>


                    </a-form>
                    <div style="height:500px;overflow-y:scroll">
                        <a-table style="margin-top:10px" :pagination="false"  :loading="PPESupplyRequestParams.pagination.value.loading"  :data-source="PPESupplyRequestParams.hzDataSource.value" :columns="PPESupplyRequestParams.hzColumns.value">

                        </a-table>

                    </div>


                </div>


                <div style="height:800px;overflow:scroll" v-else-if="PPESupplyRequestParams.popType.value==2">
                    <a-form style="margin-top:20px"
                            :model="PPESupplyRequestParams.queryParams.value">
                        <a-form-item label="通知标题：">

                            <a-input disabled :value="PPESupplyRequestParams.noticePreView.value.title"
                                     style="width:400px">
                            </a-input>

                        </a-form-item>
                        <a-form-item label="通知人：">
                            <a-table :pagination="false" :data-source="PPESupplyRequestParams.noticePreView.value.noticePerson" :columns="PPESupplyRequestParams.noticePreView.value.columns">

                            </a-table>
                        </a-form-item>
                        <a-form-item label="抄送对象：">
                            <a-table :pagination="false" :data-source="PPESupplyRequestParams.noticePreView.value.cctarget" :columns="PPESupplyRequestParams.noticePreView.value.columns">

                            </a-table>
                        </a-form-item>
                        <a-form-item label="邮件内容：">
                            <div style="padding: 2px; border: 1px solid #f3f5f7; border-radius: 4px; ">

                                <div v-html="PPESupplyRequestParams.noticePreView.value.EmailBody"></div>

                            </div>
                        </a-form-item>

                    </a-form>
                </div>



                <div style="height:500px;" v-else-if="PPESupplyRequestParams.popType.value==3">
                    <div class="title">领取凭证</div>
                    <div style="width:70%;height:100px;">
                        <div style="font-weight:500;margin-bottom:20px">附件:</div>
                        <a-upload-dragger v-model:file-list="PPESupplyRequestParams.uploadImg.value.fileList"
                                          :item-render="PPESupplyRequestParams.itemRender.value"
                                          :custom-request="()=>{}"
                                          v-on:change="PPESupplyRequestParams.handleChange">

                            <p class="ant-upload-text">单击或拖动文件到此区域进行上传</p>
                            <p class="ant-upload-hint">
                                支持单个或批量上传
                            </p>
                        </a-upload-dragger>

                    </div>

                </div>

                <div style="height: 700px;" v-else-if="PPESupplyRequestParams.popType.value==4">
                    <div style="display:flex;align-items:center;justify-content:space-between">
                        <div class="title">预览表</div>
                        <a-button v-on:click="PPESupplyRequestParams.downloadSend" type="primary">下载</a-button>
                    </div>

                    <div style="max-height: 400px; overflow-y: scroll ">
                        <a-table :pagination="false" :data-source="PPESupplyRequestParams.sendDataSource.value" :columns="PPESupplyRequestParams.sendColumns.value">

                        </a-table>
                    </div>
                    <div class="title">附件</div>
                    <div style="width:50%;height:100px;margin-top:20px;">


                        <a-upload-dragger v-model:file-list="PPESupplyRequestParams.uploadImg.value.fileList"
                                          :item-render="PPESupplyRequestParams.itemRender.value"
                                          :custom-request="()=>{}"
                                          v-on:change="PPESupplyRequestParams.handleChange">

                            <p class="ant-upload-text">单击或拖动文件到此区域进行上传(请上传签名后的领取表)</p>

                            <p class="ant-upload-hint">
                                支持单个或批量上传
                            </p>
                        </a-upload-dragger>

                    </div>

                </div>
            </a-modal>
            <header class="px-5 box-border">
                <div class="flex items-center">
                    <div class="w-full h-[48px] text-[13px]  rounded-lg mx-auto my-[10px]  bg-white  text-[#888888] text-3xl flex items-center px-10">   <div class="w-22 h-22 bg-blue-200 mr-5"> <img class="w-full h-full cursor-pointer" v-on:click="PPESupplyRequestParams.vvback()" src="~/Assets/nimgs/exit.png" alt="返回" /></div> <span class="text-[]">信息门户<span class="mx-2">/</span>劳防用品<span class="mx-2">/</span><span class="text-[#424758] text-[15px]">用品申请</span> </span>  </div>
                </div>
                <a-spin :spinning="PPESupplyRequestParams.pagination.value.loading" tip="加载中，请耐心等待" />
                <a-tabs type="card" v-on:change="PPESupplyRequestParams.tchange" style="height:100%;width:100%;padding:10px 30px;box-sizing:border-box" v-model:active-key="PPESupplyRequestParams.cIndex.value" class="w-full h-[48px] text-[13px] rounded-lg  bg-white">
                    <a-tab-pane v-for="(e,i) in PPESupplyRequestParams.tabList.value" :key="e.value" :tab="e.label">
                        <div class="w-full h-min-[108px] bg-white py-8">
                            <div class="mb-5 text-[16px] font-bold text-black">筛选条件</div>
                            <a-row>
                                <a-form layout="inline"
                                        :model="PPESupplyRequestParams.queryParams.value">
                                    <a-form-item label="申请单号">
                                        <a-input placeholder="请输入申请单号" allow-clear v-model:value="PPESupplyRequestParams.queryParams.value.ApplyNo"
                                                 style="width:200px">
                                        </a-input>
                                    </a-form-item>
                                    <a-form-item label="日期">
                                        <a-range-picker :placeholder="['请选择开始日期','请选择结束日期']" v-model:value="PPESupplyRequestParams.queryParams.value.Time" show-time />
                                    </a-form-item>
                                    <a-form-item label="状态">
                                        <a-select placeholder="请选择状态" allow-clear :filter-option="PPESupplyRequestParams.filterOption" :options="PPESupplyRequestParams.StatusList.value.map(e=>{ return { label:e.StatusName,value:e.CurrentStatus } })" show-search v-model:value="PPESupplyRequestParams.queryParams.value.Status"
                                                  style="width:180px">


                                        </a-select>
                                    </a-form-item>
                                    <a-form-item label="部门">
                                        <a-select :filter-option="PPESupplyRequestParams.filterOption" placeholder="请选择部门" allow-clear :options="PPESupplyRequestParams.deptList.value" show-search v-model:value="PPESupplyRequestParams.queryParams.value.DepartmentId"
                                                  style="width:180px">
                                        </a-select>
                                    </a-form-item>


                                    <a-form-item label="厂区">

                                        <a-select :filter-option="PPESupplyRequestParams.filterOption" allow-clear v-on:change="PPESupplyRequestParams.sChange" placeholder="请选择厂区" :options="PPESupplyRequestParams.areaList.value" show-search v-model:value="PPESupplyRequestParams.queryParams.value.FactoryAreaId"
                                                  style="width:180px">

                                        </a-select>
                                    </a-form-item>
                   
                                    <a-form-item>
                                        <a-col><a-button v-on:click="PPESupplyRequestParams.getTableList(true)" type="primary">查询</a-button></a-col>
                                    </a-form-item>
                                </a-form>




                            </a-row>

                            <div class="flex w-full mt-10">
                                <a-card :bordered="true" class="w-full  mt-12">
                                    <template #title>
                                        <div class="w-full flex justify-between items-center">
                                            <div class="flex items-center"> <div>申请单：</div> <div class="ml-7"><span style="color:#108ee9;font-size:20px">{{PPESupplyRequestParams.pagination.value.total}}</span></div></div>
                                            <a-space>


                                                <a-tooltip>
                                                    <template #title>
                                                        请勾选汇总申请单
                                                    </template>
                                                    <a-button :disabled="PPESupplyRequestParams.dataSource1.value.length==0|| PPESupplyRequestParams.Ids.value.length==0" v-on:click="PPESupplyRequestParams.handleSumInfo">申请单汇总</a-button>
                                                </a-tooltip>

                                                <a-button v-on:click="PPESupplyRequestParams.addRequest" type="primary">新增</a-button>

                                            </a-space>

                                        </div>
                                    </template>

                                    <a-table class="mt-0" v-if="!PPESupplyRequestParams.pagination.value.loading" :row-selection="PPESupplyRequestParams.rowSelection" :row-key="record => record.Id" :loading="PPESupplyRequestParams.pagination.value.loading" v-on:change="PPESupplyRequestParams.handleTableChange" :pagination="PPESupplyRequestParams.pagination.value" :data-source="PPESupplyRequestParams.dataSource1.value" :columns="PPESupplyRequestParams.columns1.value">

                                    </a-table>

                                </a-card>

                            </div>

                        </div>


                    </a-tab-pane>
                </a-tabs>
            </header>
        </a-config-provider>
    </a-style-provider>
</div>
@section Js{
    <script src="~/bussiness/js/base/tailwind.js"></script>
    <script type="module">
        import Composition from '../../bussiness/js/pg/PPE/SupplyRequest.js?v=@DateTime.Now.ToString("yyyyMMddHHmm")'
        import localeValues from '../../Bussiness/js/base/es/locale/zh_CN.js'
        singalApp('PPESupplyRequest', Composition, localeValues)
    </script>
}
